<template>
  <div class="app_container">
    <div class="app_top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-image class="logo_1" style="width: 115%;height: 120%" :src="require('@/assets/img/arena_logo.png')" fit="contain"></el-image>
        </el-col>
        <el-col :span="12" >
          <el-row :gutter="20" style="margin-left: 50px">
            <el-col :span="10"><el-input class="sous_1" v-model="searchKeyword" placeholder="请输入搜索关键字"></el-input> </el-col>
            <el-col :span="3">  <el-button class="sous_2" color="#F8CF01"  @click="search">搜索</el-button></el-col>
            <el-col :span="11">
              <DropdownMenu class="sous_3"/>
            </el-col>
          </el-row>
        </el-col>

      </el-row>
    </div>
    <div class="app_bottom">
      <el-container>
        <el-header >
          <nav>
            <router-link to="/firstPage">首页</router-link>  |
            &nbsp;&nbsp;&nbsp;
            <router-link to="/siteEnvironment">场地环境</router-link>
            &nbsp;&nbsp;&nbsp;
            <router-link to="/venueReservation">场地预约</router-link>
            &nbsp;&nbsp;&nbsp;
            <router-link to="/memberRecharge">会员</router-link>
            &nbsp;&nbsp;&nbsp;
            <router-link to="/venueDynamics">场馆动态</router-link>
            &nbsp;&nbsp;&nbsp;
            <router-link to="/sportsKnowledge">运动常识</router-link>
          </nav>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>
          <div class="footer_a">
            <el-text class="mx-1" type="warning" style="cursor: pointer;">网站首页</el-text>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-text class="mx-1" type="warning" style="cursor: pointer;">关于我们</el-text> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-text class="mx-1" type="warning" style="cursor: pointer;">联系我们</el-text>
            <div class="bottom" style="margin-left: -150px;margin-top: 10px">
              <el-text class="mx-1" type="info">Copyright @2023 基于SprintBoot的球馆体育场地预约系统   中山省ICP备201563745J号</el-text>
            </div>
          </div>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'
import DropdownMenu from "@/components/DropdownMenu.vue";

// const imageUrl = require('@/assets/img/arena_logo.png');

const searchKeyword = ref('');

// eslint-disable-next-line no-unused-vars
const search = () => {
  console.log('搜索关键字:', searchKeyword.value);
  // 处理搜索逻辑，例如发起搜索请求等
};

export default {
  name: 'HomeView',
  components: {
    DropdownMenu
  },

}
</script>

<style lang="scss">
.app_container{
  width: 80%;
  height: 90%;
  margin:auto 0;
  padding: 0;

}
#app{
  height: 1700px;
  background: url('@/assets/img/bg_ljj.jpg');
}
.app_top{
  width: 115%;
  height: 145px;
  margin-left: 100px;

}
.app_bottom{
  margin-top: 40px;
  width: 90%;
  height: 480px;
  margin-left: 200px;
}
.el-header{
  background-color: #29282B;
}
.el-main{
  //height: 1300px;
  background: #FFFFFF;
}
.el-footer{
  background-color: #29282B;
}
.sous_1{
  margin-top: 110px;
}
.sous_2{
  margin-top: 110px;
  //margin-left: -17px;
  color:#FFFFFF;

}

.sous_3{
  margin-top: 104px;
  margin-left: 20px;
}
.logo_1{
  margin-left: -155px;
}
.el-col{
  height: 150px;
}
nav {
  padding: 20px;
  margin-left: 15px;

  a {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 19px;

    &.router-link-exact-active {
      color: #F8CF01;
    }
  }
  a:hover{
    text-decoration:underline ;
    color: #F8CF01;
  }
}

.footer_a{
  margin-left: 400px;
}
</style>